import React, { Component } from 'react'
import CheckBoxGroup from '../components/CheckBoxGroup'
import RadioBoxGroup from '../components/RadioBoxGroup'
import Select from '../components/Select'

export default class Test extends Component {

    state = {
        datas: [
            { value: "football", label: "足球" },
            { value: "basketball", label: "篮球" },
            { value: "movie", label: "电影" },
        ],
        chooseDatas: [],
        options: [
            { value: "0", label: "女" },
            { value: "1", label: "男" },
        ],
        choosed: "",
        selectDatas: [
            { value: "1001", label: "上海" },
            { value: "1002", label: "北京" },
            { value: "1003", label: "成都" },
        ],
        choosedVal: ""
    }

    onChange = (newArr) => {
        console.log("🚀 ~ file: Test.js:22 ~ Test ~ newArr:", newArr)
        this.setState({ chooseDatas: newArr })
    }

    onRadioChange = (val) => {
        console.log("🚀 ~ file: Test.js:27 ~ Test ~ val:", val)
        this.setState({ choosed: val })
    }

    onSelectChange = (val) => {
        console.log("🚀 ~ file: Test.js:44 ~ Test ~ val:", val)
        this.setState({ choosedVal: val })
    }


    render() {
        return (
            <>
                <CheckBoxGroup
                    options={this.state.datas}
                    value={this.state.chooseDatas}
                    onChange={this.onChange}
                    name="loves"
                />
                <RadioBoxGroup
                    options={this.state.options}
                    value={this.state.choosed}
                    onChange={this.onRadioChange}
                    name="sex"
                />
                <Select
                    options={this.state.selectDatas}
                    value={this.state.choosedVal}
                    onChange={this.onSelectChange}
                    name="city"
                />
            </>
        )
    }
}
